<template>
  <Modal v-model="open" :closeOnMask="false">
    <div slot="header">用户</div>
    <Form :model="form" :rules="rules" mode="twocolumn" ref="form">
      <FormItem label="用户名" prop="username" required>
        <input type="text" v-model="form.username"/>
      </FormItem>
      <FormItem label="姓名" prop="name">
        <input type="text" v-model="form.name"/>
      </FormItem>
      <FormItem label="所属机构" prop="branchSn">
        <TreePicker :option="branchOption" v-model="form.branchSn" placeholder="所属机构" style="width:100%"
                    filterable></TreePicker>
      </FormItem>
      <!--      <FormItem label="头像" prop="avatar">-->
      <!--        <input type="text" v-model="form.avatar"/>-->
      <!--      </FormItem>-->
      <FormItem label="手机号" prop="phone">
        <input type="text" v-model="form.phone"/>
      </FormItem>
      <FormItem label="性别" prop="gender">
        <Select v-model="form.gender" dict="Gender"/>
      </FormItem>
      <FormItem label="状态" prop="enable">
        <HSwitch v-model="form.enable">
          <span slot="open">启用</span>
          <span slot="close">禁用</span>
        </HSwitch>
      </FormItem>
      <FormItem label="角色" single>
        <Checkbox :datas="allRoles" keyName="sn" titleName="name" v-model="form.roles"/>
      </FormItem>
    </Form>
    <div slot="footer">
      <Button @click="open=false">取消</Button>
      <Button :loading="loading" color="primary" @click="saveOrUpdate">确认</Button>
    </div>
  </Modal>
</template>
<script>
import {DataSource, ajax, util} from 'framework'

export default {
  name: 'UserDialog',
  data: function () {
    return {
      open: false,
      loading: false,
      isAdd: false,
      form: {
        username: null,
        password: null,
        userType: null,
        name: null,
        avatar: null,
        phone: null,
        enable: null,
        gender: null,
        roles: [],
      },
      allRoles:[],

      //验证规则
      rules: {
        mobile: ['phone']
      },
      branchOption: {
        keyName: 'sn',
        parentName: 'psn',
        titleName: 'name',
        dataMode: 'list',
        datas: []
      },
    }
  }, mounted() {
    ajax.get("branch/list").then(r => {
      this.branchOption.datas = r.data;
    })
    ajax.get("role/list").then(r=>{
      this.allRoles=r.data
    })
  }, methods: {
    show(primary) {
      this.loading = true
      util.clean(this.form)
      if (primary) {//show edit
        this.isAdd = false
        ajax.get("user/detail", primary).then(r => {
          Object.assign(this.form, r.data)
          this.loading = false;
          this.open = true;
        })
      } else {
        this.isAdd = true
        this.open = true
        this.loading = false
      }
    },
    saveOrUpdate() {
      var validResult = this.$refs.form.valid();
      if (validResult.result) {
        this.loading = true
        ajax.post(this.isAdd ? 'user/add' : 'user/save', this.form).then(r => {
          this.open = false;
          if(this.isAdd){
            this.$Message("已保存,默认密码为123456")
          }else{
            this.$Message("已保存")
          }
          this.$emit("change", r.data)
        }).catch(e => {
          this.loading = false
          this.$Message(e.message)
        })
      }
    }
  }
}
</script>
